<!-- 蓝色登录页面2 -->
<template>
	<view class="main" :style="'background:url('+loginHead+') no-repeat center center; background-size:100% 100%'">
		<text class="title" style="font-size: 48rpx; color: #FFFFFF; text-align: center;display: block; margin-top: 500rpx;">注册</text> 
		<view class="form">
			
			<view class="form-item">
				<image src="/static/icon-mobile.png" mode="aspectFit"></image>
				<u-input v-model="username"  :customStyle="{flex:'1',color:'#FFFFFF'}" placeholderStyle="color:#FFFFFF" type="number" placeholder="请输入手机号码" />
			</view>
			
			<view class="form-item">
				<image src="/static/icon-code.png" mode="aspectFit"></image>
				<u-input v-model="verification_code" :customStyle="{flex:'1',color:'#FFFFFF'}" placeholderStyle="color:#FFFFFF" placeholder-class="inputPlace" style="margin-right: 24rpx;" placeholder="请输入验证码" />
				<u-button :customStyle="{
					fontWeight:'bold',
					border:'none !important',
					width:'180rpx',
					height:'64rpx'
				}" shape="circle" :ripple="true" size="mini" @click="getCode">{{tips}}</u-button>
				<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
			</view>
			
			<view class="form-item">
				<image src="/static/icon-pass.png" mode="aspectFit"></image>
				<u-input v-model="password" :customStyle="{flex:'1',color:'#FFFFFF'}" type="password" placeholderStyle="color:#FFFFFF" placeholder="请输入登录密码" />
			</view>
			
			<view class="form-item">
				<image src="/static/icon-pass.png" mode="aspectFit"></image>
				<u-input v-model="repassword" :customStyle="{flex:'1',color:'#FFFFFF'}" type="password" placeholderStyle="color:#FFFFFF" placeholder="请确认登录密码" />
			</view>
			
			<view class="submit" @click="register">
				<text>注册</text>
			</view>
			
			<!-- <view class="other-submit"> -->
				<!-- <navigator hover-class="none" style="color: #FFFFFF;" url="/pages/user/register">立即注册</navigator> -->
				<!-- <navigator hover-class="none" style="color: #666666;" url="/pages/user/findpassword">忘记密码</navigator> -->
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			loginHead:this.$u.http.config.host + '/static/images/reg-log-background.jpg',
			isshow:false,
			popupShow:false,
			tips: '',
			seconds: 60,
			
			username: '', //手机号码
			password: '', //密码
			verification_code:"",
			repassword:"", 
			
			token:"",
			user:{},
			
			
		};
	},
	onLoad() {
		
	},
	methods: {
		//当前登录按钮操作
		register() {
			
			if (!this.username) {
				this.$u.toast('请输入您的手机号');
				return;
			}
		
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.username)) {
				this.$u.toast('请输入正确手机号');
				return;
			}
			
			if (!this.password) {
				this.$u.toast('请输入您的密码');
				return;
			}
			
			this.$u.http.get('user/public/register',{
				username:this.username,
				password:this.password,
				code:this.code,
				verification_code:this.verification_code
			}).then(res => {
				this.$u.toast(res.msg);
				if(res.code){
					setTimeout(res => {
						uni.navigateBack({
							delta:1
						})
					},1000)
				}
			})
		},
		
		codeChange(text) {
			this.tips = text;
		},
		
		getCode() {
			if(this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					this.$u.http.get('user/verification_code/send',{username:this.username}).then(res => {
						this.$u.toast(res.msg);
						if(res.code){
							this.$refs.uCode.start();
						}
					})
				}, 1000);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			this.$u.toast('倒计时结束');
		},
		start() {
			this.$u.toast('倒计时开始');
		},
	}
};
</script>
<style lang="less">
page,.main{
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
}
.third-login{
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding-bottom: 80rpx;
	.third-login-title{
		display: flex; flex:1;
		justify-content: center;
		color:#999999;
		margin-bottom: 56rpx;
	}
	.third-platform{
		display: flex;
		justify-content: center;
		image{
			width: 88rpx;
		}
	}
}

.other-submit{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin:0 74rpx;
	navigator{
		font-size: 26rpx;
	}
}

.submit{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin:32rpx 74rpx 48rpx;
	background-color: #2e8bf0;
	box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,0.1);
	color:#FFFFFF;
	height: 102rpx;
	border-radius: 52rpx;
}

.header-box{
	display: flex;
	flex-direction: column;
	margin: 175rpx 0 0 112rpx;
	.head-title{
		color: #000000; font-size: 56rpx;
		margin-bottom: 32rpx;
	}
	.head-description{
		text{
			font-size: 28rpx; color:#999999
		}
	}
}
.form{
	display: flex;
	flex-direction: column;
	margin-top: 74rpx;
	.form-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: #FFFFFF solid 1rpx;
		height: 110rpx;
		margin: 0 74rpx; 
		margin-bottom: 32rpx;
		image{
			height: 42rpx;
			width: 32rpx;
			margin: 0 38rpx 0 48rpx;
		}
		input{ font-size: 28rpx; display: flex; flex:1; margin-right: 32rpx;}
	}
}

.input-box{
	display: flex;
	flex-direction: row;
	margin:0 24rpx;
}
.input-box input{
	font-size: 24rpx;
	background-color: #FFFFFF;
	padding:0 32rpx;
	height: 64rpx;
	margin:  0;
	display: flex;
	flex: 1;
	border-radius: 32rpx;
}
</style>
